<template>
  <div class="my">
    <div class="my-top">
      <div class="my-person">
      <div class="my-null"></div>
      <div class="my-image">
        <div><img :src="avatarUrl" alt=""></div>
        <p>{{nickName}}</p>
        </div>
      <div class="my-system" @click="systemInfo()"> <img src="../../../static/images/system.png" alt=""> 设置</div>
      </div>
      <div class="my-profit">
        <div>
          <div>12345</div>
          <p>可提收益</p>
        </div>
        <div>
          <div>12345</div>
          <p>消费之处</p>
        </div>
        <div>
          <div>12345</div>
          <p>已提收益</p>
        </div>
      </div>
    </div>
    <div class="my-bottom">
      <div v-for="item in tabA" v-bind:class="{ classAactive: selectClassAValue === item.id }" v-bind:key="item.title">
        <div   @click="selectCalssA(item.id)">
        <div class="iconA">
         <img v-bind:src="item.img" alt="">
         <p>{{item.title}}</p>
        </div> 
        <div class="iconB">
          <img src="../../../static/images/arrow.png" alt="">
        </div>
        </div>
        <button v-if="canIUse && !isActive" class="button-getuserInfo" @getuserinfo="bindGetUserInfo" @click="getUserInfo" open-type="getUserInfo"></button>
      </div>
    </div>
  </div>
</template>

<script>
import s from '@/utils/s'
export default {
  data () {
    return {
      selectClassAValue: 1,
      isActive: false,
      avatarUrl: '',
      nickName: '',
      canIUse: wx.canIUse('button.open-type.getUserInfo'),
      tabA: [
        {id: 1, title: '我的收藏', img: require('../../../static/images/1.png')},
        {id: 2, title: '我的下载', img: require('../../../static/images/2.png')},
        {id: 3, title: '我的订阅', img: require('../../../static/images/3.png')},
        // {id: 4, title: '邀请好友', img: require('../../../static/images/4.png')},
        {id: 4, title: '修改密码', img: require('../../../static/images/5.png')}]
    }
  },
  methods: {
    selectCalssA (item) {
      this.selectClassAValue = item
      if (item === 4) {
        console.log('路由跳转')
        wx.navigateTo({
          url: '/pages/password/main'
        })
      } else if (item === 1) {
        wx.navigateTo({
          url: '/pages/collection/main'
        })
      } else if (item === 2) {
        wx.navigateTo({
          url: '/pages/download/main'
        })
      } else if (item === 3) {
        wx.navigateTo({
          url: '/pages/login/main'
        })
      }
    },
    systemInfo () {
      const url = `/pages/info/main`
      wx.navigateTo({ url })
    },
    bindGetUserInfo (e) {
      const userInfo = e.target.userInfo
      const $this = this
      wx.login({
        success: function (res) {
          console.log(res, '测试')
          if (res.code) {
            // 获取微信登录的code缓存 在接口调用的时候使用
            // wx.setStorage({
            //   key: 'code',
            //   data: res.code
            // })
            wx.request({
              url: s.prefixHttp + 'report-service/api/member/wxLogin',
              data: {
                code: res.code
              },
              success: function (res) {
                console.log(res)
                $this.isActive = true
              },
              fail: function (res) {
                console.log(res)
                $this.isActive = false
              }
            })
          } else {
            console.log('登录失败！' + res.errMsg)
          }
        }
      })
      this.avatarUrl = userInfo.avatarUrl
      this.nickName = userInfo.nickName
    },
    getUserInfo () {
      console.log('click事件首先触发', this.canIUse, this.isActive)
      // 判断小程序的API，回调，参数，组件等是否在当前版本可用。  为false 提醒用户升级微信版本
      // console.log(wx.canIUse('button.open-type.getUserInfo'))
      if (wx.canIUse('button.open-type.getUserInfo')) {
        // 用户版本可用
      } else {
        console.log('请升级微信版本')
      }
    },
    onLoad () {
      const $this = this
      wx.getSetting({
        success: function (res) {
          if (res.authSetting['scope.userInfo']) {
            wx.getUserInfo({
              success: function (res) {
                const userInfo = res.userInfo
                $this.avatarUrl = userInfo.avatarUrl
                $this.nickName = userInfo.nickName
                $this.isActive = true
                console.log(res.userInfo)
              }
            })
          }
        }
      })
    }
  },
  created () {
    this.onLoad()
  }
}
</script>

<style>
.my {
  font-size: 14px;
  position: absolute;
  height: 100%;
  width: 100%;
  background: #f8f8f8;
}
.my-top {
  position: relative;
}
.my-top .my-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
 background: #01bcd4;
 color: white;
 padding: 15px;
 font-weight: 400;
 padding-bottom: 72px;
}
.my-top img {
  width: 20px;
  height: 20px;
}
.my-null {
  width: 80px;
}
.my-image {
  text-align: center;
}
.my-image div {
  /* border: 5px solid #50d5e4;
  border-radius: 81px;
  width: 81px;
  height: 81px; */
}
.my-image img {
  border: 4px solid #73dce8;
  width: 76px;
  height: 76px;
  border-radius: 76px;
}
.my-system {
  padding: 5px 10px;
  display: flex;
  font-size: 16px;
  height: 22px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.3);
}
.my-system img {
  margin-right: 10px;
}
.my-profit {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  padding: 0 15px;
  position: absolute;
  bottom: -33px;
  height: 70px;
  width: 84%;
  margin: 0  15px;
  background: #ffffff;
}
.my-profit p {
  color: #666666;
  font-weight: 300;
}
.my-profit div div {
  font-size: 20px;
}
.my-profit>div:nth-child(1) {
  color: #30a0f6;
}
.my-profit>div:nth-child(2) {
  color: #f48d64;
}
.my-profit>div:nth-child(3) {
  color: #67cd5c;
}
.my-bottom {
  margin-top: 45px;
  padding: 0 15px;
}
.my-bottom>div {
    position: relative;
}
.my-bottom>div>div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 48px;
  background: white;
  padding: 0 15px;
  margin-bottom: 15px;
  border-radius: 5px;
}
.my-bottom div .iconA img {
  width: 29px;
  height: 29px;
  margin-right: 15px;
}
.my-bottom div .iconA {
   display: flex;
   align-items: center;
}
.my-bottom div .iconB img{
  width: 8px;
  height: 12px;
}
.button-getuserInfo {
  position: absolute;
  width: 92%;
  opacity: 0;
  height: 48px;
  z-index: 100;
  top: 0;
}
</style>
